<div #diagramcontainer style="height: 800px; width: 100%;">
  <div  #ref class="diagram-container" style="padding: 0.1rem">
  
  </div>

  <nz-collapse  style="position: absolute;
  right: 30px;
  top: 200px;
  width: 500px;">
    <nz-collapse-panel
     
    *ngFor="let panel of panels"
    [nzHeader]="panel.name"
    [nzActive]="panel.active"
    [nzDisabled]="panel.disabled"
    >

        <form nz-form se-container="1" labelWidth="100" gutter="32">
          <se label="Id" error="Id" >
            <input
              nz-input
              placeholder=""
              [(ngModel)]="form.id"
              readonly="readonly"
              [ngModelOptions]="{ standalone: true }"
              (ngModelChange)="ngModelChange($event)"
            />
          </se>
          <se label="对象Id" error="对象Id" >
            <input
              nz-input
              placeholder=""
              [(ngModel)]="form.flowid"
              readonly="readonly"
              [ngModelOptions]="{ standalone: true }"
              (ngModelChange)="ngModelChange($event)"
            />
          </se>
  
          <se label="对象名称" error="对象名称" required>
            <input
              nz-input
              placeholder=""
              [(ngModel)]="form.flowname"
              readonly="readonly"
              [ngModelOptions]="{ standalone: true }"
              (ngModelChange)="ngModelChange($event)"
            />
          </se>
  
          <se label="备注" error="备注">
            <input
              nz-input
              placeholder=""
              [(ngModel)]="form.flowdesc"
              name="flowdesc"
              [ngModelOptions]="{ standalone: true }"
              (ngModelChange)="ngModelChange($event)"
            />
          </se>
  
          <!-- <se label="网关处理器" error="网关处理器" *ngIf="form.nodeProcessClassVisable">
            <input
              nz-input
              [(ngModel)]="form.nodeProcessClass"
              placeholder="网关处理器"
              [ngModelOptions]="{ standalone: true }"
              (ngModelChange)="ngModelChange($event)"
            />
          </se> -->
  
          <se label="条件表达式" error="条件表达式" *ngIf="form.conditionexpressionVisable">
            <textarea
              nz-input
              [(ngModel)]="form.conditionexpression"
              placeholder="条件表达式"
              [ngModelOptions]="{ standalone: true }"
              (ngModelChange)="ngModelChange($event)"
            ></textarea>
          </se>
  
          <se label="脚本类型" error="脚本类型" *ngIf="form.flowscripttypeVisable">
            <nz-select
              [(ngModel)]="form.flowscripttype"
              [ngModelOptions]="{ standalone: true }"
              (ngModelChange)="flowscripttypeChange($event)"
            >
              <nz-option nzValue="javascript" nzLabel="javascript"></nz-option>
              <nz-option nzValue="executor" nzLabel="executor"></nz-option>
              <nz-option nzValue="python" nzLabel="python"></nz-option>
              <nz-option nzValue="sql" nzLabel="sql"></nz-option>
              <nz-option nzValue="lua" nzLabel="lua"></nz-option>        
              <nz-option nzValue="csharp" nzLabel="csharp"></nz-option>
    
            </nz-select>
          </se>
          <se label="执行器" error="请选择执行器" *ngIf="form.nodeProcessClassVisable">
            <nz-select
            [(ngModel)]="form.nodeProcessClass"
            [ngModelOptions]="{ standalone: true }"
            (ngModelChange)="ngModelChange($event)"
          >
  
          <nz-option *ngFor="let option of executors" [nzLabel]="option.label" [nzValue]="option.value"></nz-option>
     
  
          </nz-select>
          </se>
  
  
          <se label="执行器参数(JSON)" error="请选择执行器" *ngIf="form.nodeProcessClassVisable">
         
            <nz-code-editor
            [nzToolkit]="toolkit"
            [class.full-screen]="fullScreen"
            (ngModelChange)="ngModelChange($event)"
            style="width: 100%; height: 500px; padding-top: 1rem"
            class="editor"
            [(ngModel)]="form.nodeProcessParams"
            [ngModelOptions]="{ standalone: true }"
            [nzEditorOption]="{ theme: 'vs',language: 'json' }"
          ></nz-code-editor>
     
          </se>
  
          <se label="脚本" error="类型" *ngIf="form.flowscriptVisable">
            <nz-code-editor
            [nzToolkit]="toolkit"
            [class.full-screen]="fullScreen"
              (ngModelChange)="ngModelChange($event)"
              style="width: 100%; height: 500px; padding-top: 1rem"
              class="editor"
              [(ngModel)]="form.flowscript"
              [ngModelOptions]="{ standalone: true }"
              [nzEditorOption]="{ theme: 'vs',language: 'json' }"
            ></nz-code-editor>
          </se>
        </form>

  
    
    </nz-collapse-panel>
  </nz-collapse>



  <ng-template #toolkit>
    <i
      nz-icon
      [class.active]="fullScreen"
      nz-tooltip
      nzTooltipTitle="Toggle Fullscreen"
      [nzType]="fullScreen ? 'fullscreen-exit' : 'fullscreen'"
      (click)="toggleFullScreen()"
    ></i>
  </ng-template>
  <ng-template #extraTemplate>
    <a>More</a>
  </ng-template>


  <!-- <nz-collapse>
        <nz-collapse-panel [nzHeader]="nzHeader" nzExpandIconPosition="right" nzActive="false"> -->

  <!-- </nz-collapse-panel>
      </nz-collapse> -->
</div>
